<!-- 收货人列表 -->
<template>
  <s-layout title="收货人" :bgStyle="{ color: '#FFF' }">
    <view v-if="state.list.length">
		
		
		<view class="userClass"   v-for="item in state.list" @tap="onSelect(item)" >
			
			<view class="a">
			  <uni-tag
			   
			    size="small"
			  class="ss-m-r-10"
			  
			  custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
			    v-if="item.defaultStatus"
			    text="默认"
			  />
			
			</view>
			
			<view class="userClass_left ">
				
				
				<view >
					
					<text>{{item.name}}</text>
					<text> · </text><text>{{   item.mobile}}</text>
				</view>
				<view  @tap.stop="clickedit(item)">
					
					<text class="edClass">编辑</text>
					
				</view>
				
				
				
			</view>
			
			
			
		</view>
		
		
		
    <!-- <s-address-item
        hasBorderBottom
        v-for="item in state.list"
        :key="item.id"
        :item="item"
        @tap="onSelect(item)"
      /> -->
    </view>
   <su-fixed bottom placeholder>
      <view class="footer-box ss-flex ss-row-between ss-p-20">
      
        <button
          class="add-btn ss-reset-button ui-Shadow-Main"
          @tap="sheep.$router.go('/pages/user/address/addressusername')"
        >
          新增收货人
        </button>
      </view>
    </su-fixed>
   
    <s-empty
      v-if="state.list.length === 0 && !state.loading"
      text="暂无收货人"
      icon="/static/data-empty.png"
    />
  </s-layout>
</template>

<script setup>
  import { onBeforeMount, reactive } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash-es';
  import AreaApi from '@/sheep/api/system/area';
  import AddressApi from '@/sheep/api/member/address';
  import ConsigneeApi from '@/sheep/api/member/consignee';

  const state = reactive({
    list: [], // 地址列表
    loading: true,
    openType: '', // 页面打开类型
  });
//编辑
 const clickedit = (item) => {
   
   sheep.$router.go('/pages/user/address/addressusername', {
     id: item.id,
   });
   
   
  };
  // 选择收货人
  const onSelect = (consigneeInfo) => {
    if (state.openType !== 'select'){ // 不作为选择组件时阻断操作
      return
    }
    uni.$emit('SELECT_PHONE', {
      consigneeInfo,
    });
    sheep.$router.back();
  };

 
  onLoad((option) => {
    if (option.type) {
      state.openType = option.type;
    }
  });

  onShow(async () => {
    state.list = (await ConsigneeApi.getAddressList()).data;
	
	console.log(state)
    state.loading = false;
  });

 
 
</script>

<style lang="scss" scoped>
  .footer-box {
    .add-btn {
      flex: 1;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 80rpx;
      color: $white;
      position: relative;
      z-index: 1;
    }

    .sync-wxaddress {
      flex: 1;
      line-height: 80rpx;
      background: $white;
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: $dark-6;
      margin-right: 18rpx;
    }
	

  }
 .userClass {
 	  display: flex;
 	 
 	  width: 80%;
 	  margin: auto;
 	  margin-top: 40rpx;
 	   
 	  text-align: center;
 	  background-color: white;
 	  padding:  40rpx;
	  border-radius: 8rpx;
	  // justify-content:space-between;
 	  
 }
 
 .userClass_left {
	 display: flex;
	 width: 100%;
     justify-content:space-between;
	 
 }
 
 .edClass {
	 
	 color:#1272FF ;
 }
 
 .area-text {
   font-size: 26rpx;
   font-weight: 400;
   color: $dark-9;
 }
 .a{
	 
	 text-align: center;
	 width: 160rpx;
 }
</style>
